<!--切换导航栏  -->
<template>
     <div>
       <span v-for="(item,index) in cutnavigate" :key="index">
         <!-- 在a标签中 绑定个class 要是index等于cutindex 就绑定 
              又通过click事件使点击的a标签 cutindex=点击的index
          -->
            <a 
            :class="{active:index===cutindex}"
             @click="pick(index)"
            > {{item}}</a>
       </span>

     </div>
</template>

<script>
export default {
  name:"TabContro",
  data () {
    return {
      cutindex:0
    }
  },
  props: {
      cutnavigate:{
         type:Array,
         default(){
            return []
         }
      }
  },
  methods: {
       pick(index){ 
             this.cutindex=index
             //在这里发送方法给父组件 并传递cutindex
             this.$emit("goodtype", this.cutindex)
       }
  }
  
}

</script>
<style  scoped>
      div{
         margin-top: 10px;
         display: flex;
         text-align: center;
         height: 40px;
         background: #ffffff;
      }
      span{
           flex: 1;
           line-height: 44px;
      }
      .active{
          display: inline-block;
          width: 55px ;
          height: 35px;
          border-bottom: 2px solid red;
      }
</style>